<template>
  <div>
    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      @click-nav="fn"
    />
  </div>
</template>

<script>
import { singerClassAPI } from "@/api";
export default {
  data() {
    return {
      items: [
        {
          text: "男歌手",
          children: [],
        },
        {
          text: "女歌手",
          children: [],
        },
        {
          text: "乐队",
          children: [],
        },
      ],
      activeId: 1,
      activeIndex: 0,
    };
  },
  async created() {
    let res = await singerClassAPI({
      limit: 6,
      type: 1,
    });
    this.items[0].children = res.data.artists.map((item) => {
      return { text: item.name, id: item.id };
    });
  },
  methods: {
    async fn() {
      let res = await singerClassAPI({
        limit: 6,
        type: this.activeIndex * 1 + 1,
      });
      this.items[this.activeIndex].children = res.data.artists.map((item) => {
        return { text: item.name, id: item.id };
      });
    },
  },
};
</script>

<style>
</style>